<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>工作量计算系统</title>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta HTTP-EQUIV="expires" CONTENT="0">


    <link rel="Shortcut Icon" href="images/favicon.ico"/>

    <link rel="stylesheet" href="src/css/layui.css">
    <script type="text/javascript" src="./src/layui.js"></script>
    <script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="./css/panel.css">

    <!--必须放最后-->

    <script type="text/javascript" src="./js/setting.js"></script>
</head>
<body>
<header></header>

<main>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>工作量汇总</legend>
    </fieldset>
    <form class="layui-form" action="" method="post">
        <div class="layui-form-item" style="margin:auto 20% ;">
            <div class="layui-input-inline">
                <select name="time" lay-verify="">
                    <option value="">时间</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017" selected>2017</option>
                    <option value="2018">2018</option>
                    <option value="2018">2019</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="workload" lay-search="">
                    <option value="">类型</option>
                    <option value="1" selected>落地</option>
                    <option value="2">异地</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="college" lay-search="">
                </select>
            </div>

            <div class=" layui-input-inline">
                <input type="text" name="teacher"
                       placeholder="教师"
                       autocomplete="off"
                       class="layui-input">
            </div>
            <div class=" layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="search">查询</button>
                <button class="layui-btn" lay-submit lay-filter="download">下载</button>
            </div>
        </div>
    </form>
    <br>
    <br>
    <hr>

    <table id="showLoad" lay-filter="test"></table>


</main>


</body>

<script>
    layui.config({
        base: './static/js/'
        , version: '101100'
    }).use('admin');
    layui.use(['form', 'table', 'jquery','admin'], function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        var table = layui.table;
        var $ = layui.jquery;

        var tableObj;

        var location = localStorage.getItem("location");
        var teacher = localStorage.getItem("teacher");

        var myurls = "/".concat(!$("[name='time']").val() ? "null" : $("[name='time']").val().toString(), "/", "true" == location ? 1 : 2, "/", null, "/", teacher);
        if (teacher) {
            $("[name = 'teacher']").val(teacher);

            if ("true" == location) {
                showTable.local.url = "/total/count" + myurls;
                tableObj = table.render(showTable.local);
            } else {
                showTable.remote.url = "/total/count" + myurls;
                tableObj = table.render(showTable.remote);
            }
        } else {
            tableObj = table.render(showTable.local);
        }

        localStorage.removeItem("location");
        localStorage.removeItem("teacher");

        $.ajax({
            method: "get"
            , url: "/teacher/college"
            , success: function (res) {
                var s = "<option value=\"\" selected>院系</option>\n";
                for (var i = 0; i < res['count']; i++) {
                    s += "<option value=\"" + res['data'][i] + "\" >" + res['data'][i] + "</option>\n";
                }
                $("select[name = 'college']").html(s);
                form.render();
            }
            , error: function (res) {
                layer.msg("请刷新页面");
            }
        });

        form.render();
        form.on('submit(search)', function (data) {

            if (!data.field['time'] || !data.field['workload']) {
                layer.msg('请确定时间和类型。', {icon: 5});
                return false;
            }

            var time = !$("[name='time']").val() ? "null" : $("[name='time']").val().toString(),
                workload = !$("[name='workload']").val() ? "null" : $("[name='workload']").val().toString(),
                college = !$("[name='college']").val() ? "null" : encodeURI($("[name='college']").val().toString()),
                teacher = !$("[name='teacher']").val() ? "null" : encodeURI($("[name='teacher']").val().toString());
            var url = "/".concat(time, "/", workload, "/", college, "/", teacher);
            layer.msg('加载中', {icon: 16, shade: 0.01});


            if ("2" === workload) {
                showTable.remote.url = "/total/count" + url;
                tableObj.reload(showTable.remote); //重载表格
            } else {
                showTable.local.url = "/total/count" + url;
                tableObj.reload(showTable.local); //重载表格
            }

            //layer.msg(JSON.stringify(data.field));
            return false;
        });
        form.on('submit(download)', function (data) {
            if (!data.field['time'] || !data.field['workload']) {
                layer.msg('请确定时间和类型。', {icon: 5});
                return false;
            }

            var time = !$("[name='time']").val() ? "null" : $("[name='time']").val().toString(),
                workload = !$("[name='workload']").val() ? "null" : $("[name='workload']").val().toString(),
                college = !$("[name='college']").val() ? "null" : encodeURI($("[name='college']").val().toString()),
                teacher = !$("[name='teacher']").val() ? "null" : encodeURI($("[name='teacher']").val().toString());
            var url = "/".concat(time, "/", workload, "/", college, "/", teacher);

            url = "/total/download" + url;


            document.location = url;

            //layer.msg(JSON.stringify(data.field));
            return false;
        });
    });


    var showTable = {
        local: {
            elem: '#showLoad'
            ,
            page: false
            ,
            url: "/total/count/" + $("[name='time']").val() + "/" + $("[name='workload']").val() + "/" + $("[name='college']").val() + "/null"
            ,
            response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: 'msg' //状态信息的字段名称，默认：msg
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
            /*
            * 表格样式测试数据
            * ,data:[{"course":42.0,"design":920.0,"expriment":74.0,"graduateDesign":1719.0,"graduatePractice":198.0,"matchs":64.0,"practice":44990.0,"project":3650.0,"teacher":"张三","total":49938.0,"years":2017},{"course":0.0,"design":40.0,"expriment":0.0,"graduateDesign":0.0,"graduatePractice":0.0,"matchs":0.0,"practice":0.0,"project":0.0,"teacher":"孙丽","total":40.0,"years":2017},{"course":0.0,"design":0.0,"expriment":0.0,"graduateDesign":0.0,"graduatePractice":0.0,"matchs":0.0,"practice":0.0,"project":48.0,"teacher":"张无","total":48.0,"years":2017},{"course":5.0,"design":0.0,"expriment":0.0,"graduateDesign":0.0,"graduatePractice":0.0,"matchs":0.0,"practice":0.0,"project":0.0,"teacher":"王五","total":5.0,"years":2017}]
            */,
            cols: [[ //表头/
                //序号	教师	课堂教学	实验教学（算法2）	课程设计	实习	毕业设计	指导创新创业项目	辅导竞赛	合计
                {field: 'id', title: 'ID', width: 110, fixed: 'left', templet: '#titleTpl'}
                , {field: 'teacher', title: '教师', width: 110}
                , {field: 'college', title: '院系', width: 110}
                , {field: 'course', title: '课堂教学', width: 110}
                , {field: 'expriment', title: '实验教学', width: 110}
                , {field: 'design', title: '课程设计', width: 110}
                , {field: 'practice', title: '教学实习', width: 110}
                , {field: 'graduateDesign', title: '毕业设计', width: 110}
                , {field: 'graduatePractice', title: '毕业实习', width: 110}
                , {field: 'project', title: '指导创新创业项目', width: 150}
                , {field: 'matchs', title: '辅导竞赛', width: 110}
                , {field: 'total', title: '合计', width: 110, sort: true}
            ]]
            ,
            done: function (res, curr, count) {
                console.log(res);
                layer.close(layer.index);
            }
        },

        remote: {
            elem: '#showLoad'
            , page: false //开启分页
            , response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: 'msg' //状态信息的字段名称，默认：msg
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
            , cols: [[ //表头/
                //
                {field: 'id', title: 'ID', width: 110, fixed: 'left', templet: '#titleTpl'}
                , {field: 'teacher', title: '教师', width: 110}
                , {field: 'course', title: '课堂教学', width: 110}
                , {field: 'expriment', title: '实验教学', width: 110}
                , {field: 'design', title: '课程设计', width: 110}
                , {field: 'graduate', title: '毕业设计', width: 110}
                , {field: 'nonLesson', title: '无课补贴', width: 110}
                , {field: 'total', title: '合计', width: 110, sort: true}
            ]]
            , done: function (res, curr, count) {
                console.log(res);
                layer.close(layer.index);
            }
        },
    };

</script>
<script type="text/html" id="titleTpl">
    {{1+d.LAY_TABLE_INDEX}}
</script>

</html>